<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'

const formRef = ref<FormInstance>()
const formData = reactive({
    username: '',
})
const formState = reactive([
    { name: '用户姓名', label: '用户姓名' },
    { name: '用户姓名', label: '用户手机号' },
])
const onFinish = (values: any) => {
  console.log('Received values of form: ', values)
  console.log('formState: ', formState)
}
</script>
<template>
    <main>
        <div class="searchForm">
            <h1 :style="{ marginBottom: '20px' }">| 用户管理</h1>
            
            <div>
                <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" @finish="onFinish">
                    <a-row :gutter="24">
                        <template v-for="(value, key) in formState" :key="key">
                            <a-col :span="6">
                                <a-form-item :name="value.name" :label="value.label" :rules="[{ required: true, message: 'input something' }]">
                                    <a-input v-model:value="formData.username" placeholder="请输入"></a-input>
                                </a-form-item>
                            </a-col>
                        </template>
                        <template v-for="(value, key) in formState" :key="key">
                            <a-col :span="6">
                                <a-form-item :name="value.name" :label="value.label" :rules="[{ required: true, message: 'input something' }]">
                                    <a-input v-model:value="formData.username" placeholder="请输入"></a-input>
                                </a-form-item>
                            </a-col>
                        </template>
                    </a-row>

                    <a-row>
                        <a-col :span="24" style="text-align: right">
                            <a-button type="primary" html-type="submit">搜索</a-button>
                            <a-button style="margin: 0 8px">重置</a-button>
                        </a-col>
                    </a-row>
                </a-form>
                <div class="search-result-list">Search Result List</div>
            </div>
        </div>
    </main>
</template>

<style scoped lang="scss">
.searchForm {
    background-color: #fff;
    padding: 12px;
}

.ant-form {
  max-width: none;
}
.search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 2px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

</style>